<template>
    <div class="relative_height">
        <!-- pc -->
        <div class="mine_wrap" v-if="innerWidth > 500">
            组件
        </div>
        <!-- 手机端 -->
        <div v-else class="mine_pho">

        </div>
        <foot />
    </div>
</template>

<script>
import {
    useStore
} from 'vuex';
import { ref, watch, computed, getCurrentInstance } from "vue";
export default {
    data() {
        return {
            imgUrl: '',
            store: '',
            innerWidth: 0
        };
    },
    created() {
        const { appContext } = getCurrentInstance();
        this.imgUrl = appContext.config.globalProperties.$imgUrl;
        this.store = useStore();
        this.scrollToTop()
        this.innerWidth = window.innerWidth
    },
    methods: {
        scrollToTop() {
            window.scrollTo({
                top: 0,
            });
        },
    }
};
</script>

<style scoped lang="less">
// 兼容
@media screen and (min-width: 1909px) and (max-width:3000px) {
    .mine_wrap {
        .mine_width {
            width: 1440px;
        }
    }
}

@media screen and (max-width: 1920px) {
    .mine_wrap {
        .mine_width {
            width: 1440px;
        }
    }
}

//pc
.mine_wrap {}

// 手机端
.mine_pho {}
</style>